<template>
	<div>
	<div style="border: 1px solid #ccc;">
		<!-- 工具栏 -->
		<Toolbar
			style="border-bottom: 1px solid #ccc"
			:editor="editor"
			:defaultConfig="toolbarConfig"
		/>
		<!-- 编辑器 -->
		<Editor
			style="height: 400px; overflow-y: hidden;"
			:defaultConfig="editorConfig"
			v-model="html"
			@onChange="onChange"
			@onCreated="onCreated"
		/>
		
	</div>
	<!-- <button type="button" @click="test">test</button> -->
	</div>
</template>

<script>
import Vue from 'vue'
import { DomEditor } from '@wangeditor/editor'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { Upload } from 'element-ui'
export default {
	name: 'CuEditor',
	components: { Editor, Toolbar },
	emits: ['success'],
	props: {
		content: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			editor: null,
			toolbarConfig: {
				// toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
				excludeKeys: [ "todo", "group-video", "codeBlock" ]
			},
			editorConfig: {
				placeholder: '请输入内容...',
				// autoFocus: false,
				// 所有的菜单配置，都要在 MENU_CONF 属性下
				MENU_CONF: {
					uploadImage: {
						customUpload(file, insertFn) {
							let params = {
								file: file,
								backType: 'editor'
							}
							Vue.prototype.$api.fileUpload('/common/uploadFile', params).then(res => {
								insertFn(res.data, '', '')
							})
						}
					}
				}
			},
			html: null
		}
	},
	mounted() {
		this.$nextTick(()=>{
			this.html = this.content
		})
	},
	beforeDestroy() {
		const editor = this.editor
		if (editor == null) return
		editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
	},
	methods: {
		onCreated(editor) {
			this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
		},
		onChange(editor) {
			this.$nextTick(()=>{
				this.$emit('success', editor.getHtml())
			})
		},
		test(){
			// const toolbar = DomEditor.getToolbar(this.editor)
			
			// const curToolbarConfig = toolbar.getConfig()
			// console.log( curToolbarConfig.toolbarKeys ) // 当前菜单排序和分组
			
			console.log(this.editor.getConfig())
		}
	}
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>